import React, { Component } from "react";
import './index.less';
import userLogo from '../../images/99_b.jpg';
import NavBar from "../../components/navbar";
import CourseNav from "../../components/coursenav";
import CourseSwitch from "../../components/courseswitch";
import CourseSection from "../../components/coursesection";

class MinePage extends Component {
  state = {
    linkSelectedIndex: 0,
  }
  clickLink(index) {
    this.setState({linkSelectedIndex: index});
  }
  render() {
    const {linkSelectedIndex} = this.state;
    const links = [
      {
        title: '我的课程'
      },
      {
        title: '我的任务'
      },
      {
        title: '我的评估'
      },
      {
        title: '我的题库'
      },
      {
        title: '个人信息'
      },
      {
        title: '充值中心'
      },
      {
        title: '精品微课'
      },
    ]
    return (
      <div className="mine-page">
        <NavBar />
        <div className="mine-container">
          <div className="mine-panle">
            <div className="left">
              <div className="user-box">
              <img src={userLogo} alt=""/>
              <div className="user-info">
                 <p className="user-name">蔷之秘</p>
                 <p className="user-grade">五年级</p>
              </div>
              </div>
              <ul>
                {
                  links.map((item, index) => {
                    let className = 'link';
                    if(index === linkSelectedIndex) className += ' link-selected';
                    return <li className={className} 
                               key={index} 
                               onClick={() => this.clickLink(index)}
                            >{item.title}</li>
                  })
                }
              </ul>
            </div>
            <div className="right">
                {
                  linkSelectedIndex === 0 &&
                  <CourseSwitch selectedIndex={0} />
                }
                { 
                  (linkSelectedIndex === 0 || linkSelectedIndex === 1 || linkSelectedIndex === 2)
                  && <CourseNav selectedIndex={0} />
                 }
                 {
                   linkSelectedIndex === 0 && 
                <div className="course-list">
                  <CourseSection />
                  <CourseSection />
                  <CourseSection />
       
                </div>
                 }
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default MinePage;
